<template>
  <footer class="footer">
    <div class="footer-bg">
      <div class="footer-bg-content">
        <div class="footer-bg-content-title">我们拥有行业顶尖技术团队以及多年一线运营经验</div>
        <div class="footer-bg-content-des">你需要的不仅是一台充电设备，更需要的是成熟的拓展经验+数字化运营平台</div>
        <div class="footer-bg-content-btn mobile-consult"  @click="btn">在线咨询</div>
      </div>
    </div>
    <div class="footer-content">
      <div class="footer-content-top">
        <!-- 左边的电话、二维码 -->
        <div class="footer-content-top-left">
          <div class="footer-content-top-left-title">全国客服热线</div>
          <div class="footer-content-top-left-phone"><a href="tel:400-877-3601">400-877-3601</a></div>
          <!-- <div class="footer-content-top-left-title">售前咨询热线</div>
          <div class="footer-content-top-left-phone"><a href="tel:199-3999-6569">199-3999-6569</a></div> -->
          <!-- <div class="footer-content-top-left-consult">在线咨询</div> -->
          <div class="footer-content-top-left-ewm">
            <div class="footer-content-top-left-ewm-content">
              <img src="@/static/ewm_1.png" alt="">
              <div class="footer-content-top-left-ewm-content-title">商家公众号</div>
            </div>
            <div class="footer-content-top-left-ewm-content">
              <img src="@/static/ewm_2.png" alt="">
              <div class="footer-content-top-left-ewm-content-title">用户公众号</div>
            </div>
          </div>
        </div>
        <div class="footer-content-top-right">
          <div class="footer-content-top-right-item" v-for="(val, index) in list" :key="index">
            <div class="footer-content-top-right-item-title">
              {{ val.title }}
            </div>
            <div class="footer-content-top-right-item-subTitle" v-for="(item, key) in val.children" :key="key">
              <nuxt-link :to="{path: `/${val.code}${item.code ? '#' + item.code : ''}`}">
                {{ item.title }}
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-content-bottom">
        <p>版权所有 © 福州家道云网络科技有限公司</p>
        <p>福建省福州市台江区上海街道工业路360号</p>
        <!-- 福州家道云网络科技有限公司成立于2018年11月30日，注册地位于福建省福州市台江区上海街道工业路360号(原怡园路东侧)中央第五街1#楼16层03办公，法定代表人为朱铭城。经营范围包括基础软件开发；网络与信息安全软件开发；支撑软件开发；应用软件开发；数字新媒体；智能化物流系统服务；智能化管理系统开发应用；信息安全服务；软件运行维护服务；人工智能基础资源与技术平台；物联网技术服务；信息技术咨询服务；信息处理和存储支持服务；大数据服务；云平台服务；云基础设施服务；云软件服务；其他未列明信息技术服务；通信网络支撑系统技术服务；其他专业咨询；代理销售保险产品；物业管理；建筑装修装饰工程专业承包相应资质等级承包工程范围的工程施工；互联网零售；粮油零售（不含国境口岸）；糕点、面包零售（不含国境口岸）；果品、蔬菜零售；肉、禽、蛋零售；水产品零售；乳制品（含婴幼儿配方奶粉）零售；乳制品（不含婴幼儿配方奶粉）零售；保健食品零售；酒、饮料及茶叶零售（不含国境口岸）；烟草制品零售；其他预包装食品零售（不含国境口岸）；其他散装食品零售（不含国境口岸）；纺织品及针织品零售；服装零售；鞋帽零售；化妆品及卫生用品零售；钟表、眼镜零售；箱包零售；厨具卫具零售；日用杂品零售；自行车等代步设备零售；其他日用品零售；文具用品零售；体育用品及器材零售（不含弩）；日用家电零售；计算机、软件及辅助设备零售；通信设备零售；其他电子产品零售；五金零售；灯具零售；家具零售；涂料零售；卫生洁具零售；木质装饰材料零售；陶瓷、石材装饰材料零售；其他室内装饰材料零售；其他未列明零售业。（依法须经批准的项目，经相关部门批准后方可开展经营活动） -->
        <p>ICP证：闽ICP备0000000号-1</p>
      </div>
    </div>
    <div class="footer-content-btns">
      <div class="footer-content-btns-left"><a href="tel:4008773601">电话咨询</a></div>
      <div class="footer-content-btns-right mobile-consult">
        <a href="https://yzf.qq.com/xv/web/static/chat/index.html?sign=37ef9b9780275393224c99ea48b4b163b4d944cb72b98c4f9e590080457f0225dda125b63937827725581c0b2818644735e24015" target="_blank">
          在线咨询
        </a>
      </div>
    </div>
    <Dialog ref="dialog" />
    <Righttool />
    <Teldialog />
  </footer>
</template>
<script>
import { mobileConsult, browserRedirect } from '@/components/mobileConsult.js'
export default {
  data () {
    return {
      list: [
        {
          title: '产品及服务',
          code: 'product',
          children: [
            { title: '设备介绍', code: 'equipIntroduce' },
            { title: '充电小程序', code: 'chargeApplets' },
            { title: '运营平台', code: 'operationPlatform' },
            { title: '我们的服务', code: 'usService' },
            { title: '专利证书', code: 'patentCertificate' }
          ]
        },
        {
          title: '解决方案',
          code: 'solve',
          children: [
            { title: '服务对象', code: 'serveTarget' },
            { title: '行业痛点', code: 'painPoint' },
            { title: '方案介绍', code: 'planIntroduce' },
            { title: '方案亮点', code: 'solveList' },
            { title: 'OEM定制', code: 'customService' },
            { title: '合作案例', code: 'cooperationDemo' }
          ]
        },
        {
          title: '资讯动态',
          code: 'news/1',
          children: [
            { title: '资讯', code: '' }
          ]
        },
        {
          title: '关于我们',
          code: 'about',
          children: [
            { title: '公司介绍', code: 'introduce' },
            { title: '理念愿景', code: 'ideaVision' },
            { title: '团队介绍', code: 'usTeam' },
            { title: '证书资质', code: 'patent' }
          ]
        }
      ]
    }
  },
  created () {
    mobileConsult('.footer-content-top-left-title')
  },
  methods: {
    btnClick (val, item) {
      this.$router.push({ path: `/${val}${item ? '#' + item : ''}` })
    },
    btn () {
      if (!browserRedirect()) {
        this.$refs.dialog.action()
      } else {
        window.open('https://yzf.qq.com/xv/web/static/chat/index.html?sign=37ef9b9780275393224c99ea48b4b163b4d944cb72b98c4f9e590080457f0225dda125b63937827725581c0b2818644735e24015')
      }
    }
  }
}
</script>
<style lang="sass" scoped>
@media screen and (min-width: 750px)
  .footer
    .footer-bg
      min-width: 1180px
      clear: both
      overflow: hidden
      background: url('../static/index_3.png') no-repeat
      background-size: cover
      background-position: center
      height: 280px
      .footer-bg-content
        width: 1180px
        margin: 0 auto
        text-align: center
        padding-bottom: 40px
        .footer-bg-content-title
          font-size: 32px
          color: #FFFFFF
          line-height: 44px
          margin-bottom: 16px
          margin-top: 54px
        .footer-bg-content-des
          font-size: 20px
          color: rgba(255, 255, 255, 0.7)
          line-height: 28px
          margin-bottom: 32px
        .footer-bg-content-btn
          width: 380px
          height: 52px
          font-size: 18px
          border-radius: 4px
          background: #fff
          line-height: 52px
          text-align: center
          color: #F57033
          margin: 0 auto
          cursor: pointer
          &:hover
            background: none
            color: #fff
            border: 1px solid #fff
    .footer-content
      min-width: 1180px
      background: #1B2532
      padding-top: 60px
      .footer-content-top
        width: 1180px
        margin: 0 auto
        display: flex
        flex-direction: row
        justify-content: space-between
        padding-bottom: 40px
        .footer-content-top-left
          color: #FFFFFF
          .footer-content-top-left-title
            font-size: 18px
            line-height: 20px
          .footer-content-top-left-phone
            font-size: 32px
            line-height: 36px
            margin-top: 12px
            margin-bottom: 20px
            a
              text-decoration: none
              color: #FFF
          .footer-content-top-left-consult
            width: 100px
            height: 32px
            line-height: 32px
            border: 1px #F57033 solid
            border-radius: 2px
            text-align: center
            font-size: 14px
            margin-top: 12px
            color: #F57033
          .footer-content-top-left-ewm
            margin-top: 30px
            display: flex
            flex-direction: row
            .footer-content-top-left-ewm-content
              margin-right: 20px
              img
                width: 80px
                height: 80px
              .footer-content-top-left-ewm-content-title
                height: 16px
                line-height: 16px
                text-align: center
                font-size: 12px
                margin-top: 8px
                color: rgba(255, 255, 255, 0.8)
        .footer-content-top-right
          display: flex
          flex-direction: row
          .footer-content-top-right-item
            margin-left: 80px
            .footer-content-top-right-item-title
              color: #fff
              font-size: 16px
              line-height: 22px
              margin-bottom: 24px
            .footer-content-top-right-item-subTitle
              font-size: 14px
              line-height: 20px
              margin-bottom: 16px
              cursor: pointer
              a
                text-decoration: none
                color: rgba(255, 255, 255, 0.8)
              &:hover a
                color: rgba(255, 255, 255, 1)
      .footer-content-bottom
        min-width: 1180px
        padding: 12px 0
        border-top-width: 1px
        border-top-style: solid
        border-top-color: rgba(255, 255, 255, 0.1)
        clear: both
        overflow: hidden
        p
          color: rgba(255, 255, 255, 0.5)
          font-size: 12px
          line-height: 24px
          text-align: center
          margin-bottom: 0
    .footer-content-btns
      display: none
</style>
<style lang="sass" scoped>
@media screen and (max-width: 750px)
  .footer
    .footer-bg
      min-width: 100vw
      clear: both
      overflow: hidden
      background: url('../static/index_3.png') no-repeat
      background-size: cover
      background-position: center
      .footer-bg-content
        width: 90vw
        margin-left: 5vw
        margin: 0 auto
        text-align: center
        .footer-bg-content-title
          font-size: 24px
          color: #FFFFFF
          line-height: 30px
          margin-bottom: 18px
          margin-top: 36px
        .footer-bg-content-des
          font-size: 20px
          color: rgba(255, 255, 255, 0.7)
          line-height: 28px
          margin-bottom: 18px
        .footer-bg-content-btn
          width: 180px
          height: 32px
          border-radius: 4px
          background: #fff
          line-height: 32px
          text-align: center
          color: #F57033
          margin: 0 auto
          margin-bottom: 36px
    .footer-content
      width: 100vw
      background: #1B2532
      padding-top: 24px
      padding-bottom: 48px
      .footer-content-top
        width: 90vw
        margin-left: 5vw
        padding-bottom: 24px
        .footer-content-top-left
          text-align: center
          .footer-content-top-left-title
            font-size: 16px
            color: rgba(255, 255, 255, 0.5)
          .footer-content-top-left-phone
            font-size: 28px
            color: #FFFFFF
            line-height: 40px
            margin-top: 4px
            a
              text-decoration: none
              color: #FFF
          .footer-content-top-left-consult
            width: 100px
            height: 32px
            line-height: 32px
            border: 1px #F57033 solid
            border-radius: 2px
            text-align: center
            font-size: 14px
            margin-top: 12px
            color: #F57033
          .footer-content-top-left-ewm
            margin: 30px auto 0
            display: flex
            flex-direction: row
            justify-content: space-between
            width: 180px
            .footer-content-top-left-ewm-content
              img
                width: 80px
                height: 80px
              .footer-content-top-left-ewm-content-title
                height: 16px
                line-height: 16px
                text-align: center
                font-size: 12px
                margin-top: 8px
                color: rgba(255, 255, 255, 0.5)
        .footer-content-top-right
          display: none
      .footer-content-bottom
        width: 100vw
        padding: 12px 0
        border-top-width: 1px
        border-top-style: solid
        border-top-color: rgba(255, 255, 255, 0.1)
        clear: both
        overflow: hidden
        p
          color: rgba(255, 255, 255, 0.5)
          font-size: 12px
          line-height: 20px
          text-align: center
          margin-bottom: 0
    .footer-content-btns
      width: 100vw
      height: 48px
      font-size: 20px
      line-height: 48px
      text-align: center
      display: flex
      flex-direction: row
      justify-content: space-between
      position: fixed
      z-index: 1000
      bottom: 0
      .footer-content-btns-left
        width: 50vw
        color: #F57033
        background: #fff
        a
          text-decoration: none
          color: #F57033
      .footer-content-btns-right
        width: 50vw
        background: #F57033
        a
          color: #fff
          text-decoration: none

</style>
